import React from 'react';
import TweenOne from 'rc-tween-one';
import { Menu, Button } from 'antd';
import { getChildrenToRender } from './utils';
import { history, } from 'umi';
import PubSub from 'pubsub-js'
const { Item, SubMenu } = Menu;
class Header3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: undefined,
      pathName: 'home'
    };
  }

  componentDidMount() {
    // console.log('location',location)
    const pathName = location.pathname?.split('/')?.[1]
    if (pathName) {
      this.setState({ pathName })
    }

  }



  clickProduct = () => {
    // window.sessionStorage.setItem('item', 'ALL')
    history.replace('/product')
    this.setState({ pathName: 'product' })

  }

  clickContactUs = () => {
    history.replace('/contactUs')
    this.setState({ pathName: 'contactUs' })
  }

  phoneClick = () => {
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
    });
  };

  itemClick = (label) => {
    window.sessionStorage.setItem('item', label)
    console.log(label)
    history.replace('/product')
    this.setState({ pathName: 'product' })
    PubSub.publish('item', label)
  }

  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const { phoneOpen, pathName } = this.state;
    const navData = dataSource.Menu.children;

    const navChildren = navData.map((item) => {
      const { children: a, subItem, ...itemProps } = item;
      if (subItem) {
        return (
          <SubMenu
            key={item.name}
            {...itemProps}
            title={
              <div
                {...a}
                className={`header3-item-block ${a.className}`.trim()}
                onClick={this.clickProduct}
              >
                {a.children.map(getChildrenToRender)}
              </div>
            }
            popupClassName="header3-item-child"

          >
            {subItem.map(($item, ii) => {
              const { children: childItem } = $item;
              console.log(subItem)
              const child = <div
                onClick={() => { this.itemClick($item.label) }}
                style={{ padding: 10 }}>{$item.label}</div>
              return (
                <Item key={$item.name || ii.toString()}  {...$item}>
                  {child}
                </Item>
              );
            })}
          </SubMenu>
        );
      }
      return (
        <Item key={item.name} {...itemProps} >
          <a {...a} className={`header3-item-block ${a.className}`.trim()}>
            {a.children.map(getChildrenToRender)}
          </a>
        </Item>
      );
    });
    const moment = phoneOpen === undefined ? 300 : null;
    return (
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        {...dataSource.wrapper}
        {...props}
      >
        <div
          {...dataSource.page}
          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
          style={{ display: 'flex', justifyContent: 'space-between' }}
        >
          <TweenOne
            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
            {...dataSource.logo}
          >
            <img width="100%" src={dataSource.logo.children}
              style={{ cursor: 'pointer' }}
              alt="img"
              onClick={() => {
                history.replace('/')
              }} />

            {/* <div style={{fontSize:48,position:'absolute',top:'25%'}}>{123}</div> */}
          </TweenOne>
          {isMobile && (
            <div
              {...dataSource.mobileMenu}
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <TweenOne
            {...dataSource.Menu}
            animation={
              isMobile
                ? {
                  x: 0,
                  height: 0,
                  duration: 300,
                  onComplete: (e) => {
                    if (this.state.phoneOpen) {
                      e.target.style.height = 'auto';
                    }
                  },
                  ease: 'easeInOutQuad',
                }
                : null
            }
            moment={moment}
            reverse={!!phoneOpen}
          >
            <div style={{ display: 'flex' }}>
              <Menu
                mode={isMobile ? 'inline' : 'horizontal'}
                // defaultSelectedKeys={[pathName]}
                theme="light"
                style={{ minWidth: 200 }}
                selectedKeys={[pathName]}
                onClick={({ item, key, keyPath }) => {
                  console.log(item, key, keyPath)
                }}
              >
                {navChildren}
              </Menu>
              <div style={{ display: 'flex', alignItems: 'center', marginTop: '-5px', marginLeft: 8 }}>
                <Button onClick={this.clickContactUs} type="text" className='contactButton'>Contact Us</Button>
              </div>
            </div>
          </TweenOne>
        </div>
      </TweenOne>
    );
  }
}

export default Header3;
